<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>石榴班</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .seal {
            width: 550px;
            height: 550px;
            border-radius: 50%;
            border: 5px solid red;
            position: relative;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            background-image: url('./images/16-logo.jpg');
            background-position: center;
            /* 水平和垂直方向上都居中 */
            background-repeat: no-repeat;
            /* 防止背景图像重复 */
            background-size: cover;
            /* 使背景图像覆盖整个元素 */
        }

        .seal-circle {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .seal-arc {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .seal-name {
            top: 10px;
            transform: rotate(0deg);
        }

        .seal-id {
            bottom: 10px;
            transform: rotate(180deg);
        }



        .seal-name span {
            display: inline-block;
            position: absolute;
            transform-origin: 50% 250px;
            color: rgb(187, 43, 40);
            font-size: 40px;
            font-weight: 800;
            font-family: "SimSun", sans-serif;
            letter-spacing: 3px;
            padding-bottom: 470px;
        }

        .seal-id span {
            display: inline-block;
            position: absolute;
            transform-origin: 50% 250px;
            color: rgb(187, 43, 40);
            font-size: 40px;
            font-weight: 800;
            font-family: "SimSun", sans-serif;
            letter-spacing: 3px;
            padding-bottom: 470px;
        }

        .seal-name span:nth-child(1) {
            transform: rotate(-75deg);
        }

        .seal-name span:nth-child(2) {
            transform: rotate(-50deg);
        }

        .seal-name span:nth-child(3) {
            transform: rotate(-25deg);
        }

        .seal-name span:nth-child(4) {
            transform: rotate(0deg);
        }

        .seal-name span:nth-child(5) {
            transform: rotate(25deg);
        }

        .seal-name span:nth-child(6) {
            transform: rotate(50deg);
        }

        .seal-name span:nth-child(7) {
            transform: rotate(75deg);
        }


        .seal-id span:nth-child(1) {
            transform: rotate(-80deg);
        }

        .seal-id span:nth-child(2) {
            transform: rotate(-60deg);
        }

        .seal-id span:nth-child(3) {
            transform: rotate(-40deg);
        }

        .seal-id span:nth-child(4) {
            transform: rotate(-20deg);
        }

        .seal-id span:nth-child(5) {
            transform: rotate(0deg);
        }

        .seal-id span:nth-child(6) {
            transform: rotate(20deg);
        }

        .seal-id span:nth-child(7) {
            transform: rotate(40deg);
        }

        .seal-id span:nth-child(8) {
            transform: rotate(60deg);
        }

        .seal-id span:nth-child(9) {
            transform: rotate(80deg);
        }
    </style>
</head>

<body>
    <div class="seal">
        <div class="seal-circle">
            <div class="seal-arc seal-name">
                <span>常</span>
                <span>州</span>
                <span>市</span>
                <span>博</span>
                <span>爱</span>
                <span>小</span>
                <span>学</span>

            </div>

            <div class="seal-arc seal-id">
                <span>石</span>
                <span>榴</span>
                <span>花</span>
                <span>开</span>
                <span> </span>
                <span>籽</span>
                <span>籽</span>
                <span>同</span>
                <span>心</span>
            </div>
        </div>
    </div>




</body>

</html>